<template>
  <div class="card flex-col">
    <div class="card-title">出售房产数量</div>
    <div class="card-count">{{ cardData.sellTotalNum }}</div>
    <div class="card-percent">占房产数量的 {{ percentStr }}</div>
    <pie-chart
      class="sale-num"
      :height="'280px'"
      title="出售房产数量"
      :chart-data="peiData"
    />
    <div class="card-detail" @click="toHouse">
      查看详情 <i class="el-icon-arrow-right" />
    </div>
  </div>
</template>

<script>
import PieChart from './PieChart'
import { sellNum } from '@/api/dashboard'
export default {
  components: { PieChart },
  props: {},
  data() {
    return {
      cardData: {},
      peiData: [],
      mapTxt: {
        selledNum: '已出售',
        sellingNum: '出售中'
      }
    }
  },
  computed: {
    percentStr() {
      const percent = ~~(
        (this.cardData.sellTotalNum / this.cardData.totalNum) *
        100
      )
      return `${percent}%`
    }
  },
  mounted() {
    this.getSellNum()
  },
  methods: {
    async getSellNum() {
      var res = await sellNum()
      if (res.code === 200) {
        this.cardData = res.data
        var list = Object.keys(this.mapTxt).map((item) => {
          return {
            name: this.mapTxt[item],
            value: this.cardData[item]
          }
        })

        this.peiData = list.filter((item) => item.value !== 0)
      }
    },
    toHouse() {
      const routerURl = this.$router.resolve({
        path: '/house/sale'
      })
      window.open(routerURl.href, '_blank')
    }
  }
}
</script>
<style lang="scss">
.card-table {
  & thead {
    color: #010101;
  }
}
</style>

<style lang="scss" scoped>
.card {
  padding: 20px;
  border-radius: 4px;
  text-align: center;
  border: 1px solid rgba(221, 221, 221, 100);
  min-height: 492px;
}

.card-title {
  color: #414141;
  font-size: 16px;
  text-align: left;
  font-weight: bold;
}

.card-count {
  margin-top: 27px;
  color: #414141;
  font-size: 36px;
  font-weight: bold;
}

.card-percent {
  margin: 10px auto 0;
  color: #414141;
  font-size: 16px;
}
.card-detail {
  margin-top: auto;
  font-size: 14px;
  color: #5ac6b7;
  text-align: right;
  cursor: pointer;
}
</style>
